/**
 * @Description: 系统指引
 * @date 2019/3/9 下午7:36
 * 1:
 * 模仿vue版本 https://github.com/PanJiaChen/vue-element-admin/tree/master/src/views/guide
 * 2:
 * 底层使用技术：[driver.js](https://github.com/kamranahmedse/driver.js)
 * 3：
 * Functional Components 函数式组件，该组件使用函数式组件，即：不能使用this、无stats、无生命周期
 */
import React from 'react';
import { Icon, Tooltip } from 'antd';
import { formatMessage, FormattedMessage } from 'umi/locale';
import Driver from 'driver.js'; // import driver.js
import 'driver.js/dist/driver.min.css'; // import driver.js css
import steps from './defineSteps';

export default function Guide(props) {
  const driver = new Driver();

  const showGuide = () => {
    driver.defineSteps(steps);
    driver.start();
  };

  return (
    <Tooltip title={formatMessage({ id: 'component.globalHeader.guide' })}>
      <a
        target="_blank"
        rel="noopener noreferrer"
        onClick={showGuide}
        className={props.className || ''}
        id="guideAgain"
      >
        <Icon type={props.iconType || 'cloud'} />
      </a>
    </Tooltip>
  );
}
